import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
import "./style.scss";
import ReactECharts from "echarts-for-react";

// render echarts option.

const Index = () => {
  const { id } = useParams();
  const [item, setItem] = useState<any>();
  const [option, setOption] = useState<any>();
  const fetchDetail = async () => {
    const resp = await axios.post("/api/detail", { id });
    console.log(resp.data);
    setItem(resp.data.data.data);
    setOption({
      xAxis: {
        type: "category",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: resp.data.data.prices,
          type: "line",
        },
      ],
    });
  };

  useEffect(() => {
    fetchDetail();
  }, []);
  if (!item) {
    return <div>...</div>;
  }
  return (
    <div>
      <ul className="ul">
        <li>姓名： {item.name}</li>
        <li>电话： {item.tel}</li>
        <li>地址： {item.address}</li>
        <li>工资： {item.price}</li>
        <li>id {item.id}</li>
      </ul>
      <div style={{ width: 500, height: 500 }}>
        <ReactECharts option={option} />
      </div>
    </div>
  );
};

export default Index;
